<%--
  Created by IntelliJ IDEA.
  User: apple
  Date: 2022/4/26
  Time: 3:41 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%String path = request.getContextPath()+"/";%>
<!doctype html>
<html>
<head>
    <base href="<%=path%>">
    <title>用户管理</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="js/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
</head>
<body class="gray-bg" style="background-color: #f3f3f4;overflow-x: hidden;">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-md-2" style="border:0px solid red">
            <div class="panel panel-primary" style="margin-left:10px;background-color:#ffffff;margin-top:10px;border-radius: 10px;box-shadow: 1px 1px 3px;">
                <div class="panel-heading">
                    <h3 class="panel-title">部门列表</h3>
                </div>
                <div class="panel-body" style="padding:0px;">
               <div id="treeDemo" class="ztree"></div>
                </div>
            </div>
        </div>
        <div class="col-md-10" style="border:0px solid red;padding:0px;">
            <div class="row " style="padding:10px;background-color:#ffffff;margin: 10px;border-radius: 10px;box-shadow: 1px 1px 3px;">
                <div class="col-md-12" style="line-height: 50px;">
                    <form class="form-inline">
                        <input type="hidden" name="deptId" id="deptId"/>
                        <div class="form-group">
                            <label for="exampleInputName2">登录名</label>
                            <input type="text" class="form-control" id="exampleInputName2" name="loginName" placeholder="登录名">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail2">手机号</label>
                            <input type="email" class="form-control" id="exampleInputEmail2" name="moblie" placeholder="手机号">
                        </div>
                        <div class="form-group">
                            <label for="status">用户状态</label>
                            <select class="form-control" name="status">
                                <option value="-1">全部</option>
                                <option value="0">启用</option>
                                <option value="1">停用</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>创建时间</label>
                            <input type="date" name="creatTime" class="form-control" placeholder="开始时间">-
                            <input type="date" name="updateTime" class="form-control" placeholder="结束时间">
                        </div>
                        <button type="button" class="btn btn-success" onclick="$.table.refresh();"><i class="glyphicon glyphicon-search"></i> 搜索</button>
                        <button type="button" class="btn btn-warning" onclick="$.table.reset();"><i class="glyphicon glyphicon-refresh"></i>重置</button>
                    </form>
                </div>
            </div>
            <div class="row" style="padding:10px;background-color:#ffffff;margin: 10px;border-radius: 10px;;box-shadow: 1px 1px 3px;">
                <div class="col-md-12">
                    <table id="table">
                    </table>
                    <div id="tools">
                        <!--
                         标签是用来判断是否有当前权限的
                         如果有，显示标签内部的内容
                        name:我们自定义的权限字符
                         -->
                        <shiro:hasPermission name="user:add">
                            <button type="button" class="btn btn-warning" onclick="$.modal.add('新增用户信息','user/toEdit');"><i class="glyphicon glyphicon-plus"></i>新增</button>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="user:edit">
                            <button type="button" class="btn btn-warning" onclick="$.modal.editTools('userId','编辑用户信息','user/toEdit?id=');"><i class="glyphicon glyphicon-edit"></i>修改</button>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="user:deletes">
                            <button type="button" class="btn btn-warning" onclick="$.modal.removes('userId','user/deletes');"><i class="glyphicon glyphicon-trash"></i>删除</button>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="user:import">
                            <button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-import"></i>导入</button>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="user:export">
                            <button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-export"></i>到处</button>
                        </shiro:hasPermission>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.7"></script>
<script src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="js/plugins/layer/layer.min.js"></script>
<script src="js/sofwin.js"></script>
<script src="js/plugins/ztree/js/jquery.ztree.core.js"></script>
</body>
<style>
</style>
<script>
    var $table;
    var index;
    $(function() {
        var options={
            columns:[{
                checkbox:true
            },{
                title:'用户Id',
                field:'userId' // json数组中对象的属性
            },{
                title:'登录名称',
                field:'loginName'
            },{
                title:'用户名称',
                field:'userName'
            },{
                title:'所属部门',
                field:'dept.name'
            },{
                title:'手机',
                field:'moblie'
            },{
                title:'更新时间',
                field:'updateTime',
                visible:false
            },{
                title:'状态',
                field:'status',
                formatter:function(value,row,index,field){
                    return '<input type="checkbox" class="js-switch" checked />';
                }
            },{
                title:'创建时间',
                field:'creatTime'
            },{
                title:'操作',
                width:'200px',
                align:'center',
                formatter:function(value,row,index,field){
                    // row 每行的对象
                    var str='';
                    <shiro:hasPermission name="user:edit">
                        str+='<button type="button" class="btn btn-warning btn-xs" onclick="$.modal.edit(\'编辑用户信息\',\'user/toEdit?id='+row.userId+'\');"><i class="glyphicon glyphicon-edit"></i>修改</button>\n';
                    </shiro:hasPermission>
                    <shiro:hasPermission name="user:delete">
                    str+='                        <button type="button" class="btn btn-warning btn-xs" onclick="$.modal.remove(\'user/delete/'+row.userId+'\',\''+row.userId+'\')"><i class="glyphicon glyphicon-trash"></i>删除</button>\n' ;
                    </shiro:hasPermission>
                    <shiro:hasPermission name="user:more">
                    str+='                        <button type="button" class="btn btn-warning btn-xs"><i class="glyphicon glyphicon-hourglass"></i>更多操作</button>';
                    </shiro:hasPermission>
                    return str;
                }
            }],
            url: 'user/data'
        }
        $.table.init(options);

    })

    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        data:{
            simpleData:{
                enable: true,
                idKey: 'deptId',
                pIdKey: 'parentId'
            }
        },
        callback:{
            onClick:function(event,treeId,treeNode,clickFlagNumber){
                $("#deptId").val(treeNode.deptId);
                $.table.refresh();
            }
        }
    };
    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    var zNodes = [];

    $(document).ready(function(){
        $.operator.post('dept/data','',function(ret){
            zNodes = ret.data;
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            zTreeObj.expandAll(true);
        })

    });


</script>

</html>